<template>
    <div>
        <md-table v-model="assessments" md-sort="name" md-sort-order="asc" md-card md-fixed-header>
            <md-table-toolbar>
                <h1 class="md-title">Assessments</h1>
                <md-button class="md-icon-button" md-menu-trigger  @click="showDialog = !showDialog">
                    <md-icon>add</md-icon>
                </md-button>
            </md-table-toolbar>

            <md-table-row slot="md-table-row" slot-scope="{ item }">
                <md-table-cell md-label="Title" md-sort-by="title">{{ item.title }}</md-table-cell>
                <md-table-cell md-label="DueDay" md-sort-by="dueDay">{{ item.dueDay }}</md-table-cell>
                <md-table-cell md-label="Unit Number" md-sort-by="unitNumber" md-numeric>{{ item.unitNumber }}
                </md-table-cell>
                <md-table-cell md-label="Unit Name" md-sort-by="unitName">{{ item.unitName }}</md-table-cell>
            </md-table-row>
        </md-table>
        <!--        dialog-->
        <md-dialog :md-active.sync="showDialog">
            <md-dialog-title>Add Unit</md-dialog-title>
            <form novalidate class="md-layout">
                <md-field>
                    <label>Title</label>
                    <md-input name="title" id="title" autocomplete="title" v-model="form.title"/>
                </md-field>
                <md-field>
                    <label>Due Day</label>
                    <md-input name="dueDay" id="dueDay" autocomplete="dueDay" v-model="form.dueDay"/>
                </md-field>
                <md-field>
                    <label>Unit Number</label>
                    <md-input type="number" id="unitNumber" name="unitNumber" autocomplete="unitNumber"
                              v-model="form.unitNumber"/>
                </md-field>
                <md-field>
                    <label>Unit Name</label>
                    <md-input name="unitName" id="unitName" autocomplete="unitName" v-model="form.unitName"/>
                </md-field>
            </form>
            <md-dialog-actions>
                <md-button class="md-primary" @click="showDialog = false">Close</md-button>
                <md-button class="md-primary" @click="first = true">Save</md-button>
            </md-dialog-actions>
        </md-dialog>

        <md-dialog-alert
                :md-active.sync="first"
                md-content="Information about to be saved!"
                md-confirm-text="Cool!"/>
    </div>
</template>
<script>
    import axios from "axios";

    export default {
        name: "Assessments",
        data: () => ({
            assessments: [],
            form: {
                title: null,
                dueDay: null,
                unitNumber: null,
                unitName: null,
            },
            showDialog: false,
            first: false,
        }),
        created() {
            axios.get('/json/Assessments.json').then(rep => {
                const {data} = rep
                this.assessments = data
            })
        }
    }
</script>


<style lang="scss" scoped>
    .card-expansion {
        height: 400px;
    }

    .md-card {
        width: 90%;
        margin: 4px;
        display: inline-block;
        vertical-align: top;
    }
</style>